<template>
  <div class="sider-menu">
    <slot name="siderLogo"></slot>
    <div v-show="!collapsed">
      <Menu :active-name="activeName" width="auto" theme="dark" @on-select="handleSelect">
        <template v-for="item in list">
          <SiderSubmenu
            v-if="item.children"
            :key="`menu_${item.name}`"
            :name="item.name"
            :parent="item"
          >
          </SiderSubmenu>
          <MenuItem v-else :key="`menu_${item.name}`" :name="item.name">
            <Icon :type="item.icon" :size="23" />
            {{item.title}}
          </MenuItem>
        </template>
      </Menu>
    </div>
    <div v-show="collapsed" class="dropdown-wrapper">
      <template v-for="item in list">
        <SiderDropdown
          v-if="item.children"
          :parent="item"
          :key="`drop_${item.name}`"
          icon-color="#fff"
          :showTitle="false"
          @on-select="handleSelect"
        >
        </SiderDropdown>
        <Tooltip
          v-else
          transfer
          :content="item.title"
          :key="`drop_${item.name}`"
          placement="right"
        >
          <span @click="handleItemMenu(item.name)" class="drop-menu-tip">
            <Icon :type="item.icon" color="#fff" :size="30"/>
          </span>
        </Tooltip>
      </template>
    </div>
  </div>
</template>

<script>
import SiderSubmenu from './SiderSubmenu.vue'
import SiderDropdown from './SiderDropdown.vue'
export default {
  name: 'SiderMenu',
  components:{
    SiderSubmenu,
    SiderDropdown
  },
  props:{
    collapsed:{
      type: Boolean,
      default: false
    },
    list:{
      type: Array,
      default: () => []
    },
    activeName: {
      type: String,
      default: ''
    }
  },
  methods:{
    /**
     * 展开状态下获取菜单name
     */
    handleSelect(name){
      //console.log("菜单: name="+name)
      this.$emit('on-select',name)
    },
    /**
     * 收缩状态下获取单菜单name
     */
    handleItemMenu(name){
      //console.log("菜单: name="+name)
      this.$emit('on-select',name)
    }
  }
}
</script>

<style lang="less">
.sider-menu{
  width: 100%;
  .drop-menu-tip, .ivu-tooltip{
    width: 100%;
    display: block;
    text-align: center;
    padding: 5px 0;
    cursor: pointer;
  }
  .dropdown-wrapper > .ivu-dropdown{
    display: block;
    margin: 0 auto;
    padding: 5px 0;
  }
}
</style>
